<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col class="card-box hostres_wrap">
        <el-card>
          <template #header><span>主机故障注入</span></template>
          <el-form label-width="120px" :rules="hostRules">
            <el-form-item label="主机地址" prop="ip" style="width: 20%">
              <el-select
                v-model="selectIP"
                placeholder="请选择主机地址"
                filterable
                clearable
              >
                <el-option
                  v-for="(item, index) in ip_list"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <el-tabs type="border-card">
            <el-tab-pane label="CPU负载故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="150px"
                    ref="cpuFormRef"
                    :model="cpuForm"
                    :rules="cpuRules"
                  >
                    <el-form-item label="CPU负载(%)" prop="cpuPercent">
                      <!-- <el-input
                        v-model="cpuForm.cpuPercent"
                        placeholder="取值是 0 到 100 的整数"
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="cpuForm.cpuPercent"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="CPU满载个数" prop="cpuCount">
                      <el-input v-model="cpuForm.cpuCount" clearable />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="cpuForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item label="CPU满载具体核" prop="cpuList">
                      <el-input
                        v-model="cpuForm.cpuList"
                        placeholder="核索引从 0 开始 (0-3 or 1,3)"
                        clearable
                      />
                    </el-form-item>

                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="performData('cpuFormRef', cpuForm, 1)"
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="磁盘读写IO故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="150px"
                    ref="diskIOFormRef"
                    :model="diskIOForm"
                    :rules="diskIORules"
                  >
                    <el-form-item label="磁盘目录" prop="path">
                      <!-- <el-input v-model="diskIOForm.path" clearable /> -->
                      <el-select
                        v-model="diskIOForm.path"
                        placeholder="默认值是 /"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in disk_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="磁盘读写IO负载" prop="readAndWrite">
                      <el-select
                        v-model="diskIOForm.readAndWrite"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          label="读"
                          value="read"
                        />
                        <el-option
                          label="写"
                          value="write"
                        />
                        <el-option
                          label="读和写"
                          value="readAndWrite"
                        />
                      </el-select>
                      <!-- <el-input
                        v-model="diskIOForm.readBurn"
                        placeholder="会创建 600M 的文件用于读，销毁实验会自动删除"
                        clearable
                      /> -->
                    </el-form-item>
                    <el-form-item label="块大小(M)" prop="size">
                      <el-input
                        v-model="diskIOForm.size"
                        placeholder="默认值是 10"
                        clearable
                      />
                    </el-form-item>
                    <!-- <el-form-item label="磁盘写IO负载" prop="writeBurn">
                      <el-input
                        v-model="diskIOForm.writeBurn"
                        placeholder="会创建 1000M 的文件，销毁实验会自动删除"
                        clearable
                      />
                    </el-form-item> -->
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="diskIOForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="performData('diskIOFormRef', diskIOForm, 2)"
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="磁盘填充故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="120px"
                    ref="diskFillFormRef"
                    :model="diskFillForm"
                    :rules="diskFillRules"
                  >
                    <el-form-item label="磁盘目录" prop="path">
                      <el-select
                        v-model="diskFillForm.path"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in disk_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="磁盘使用率(%)" prop="percent">
                      <!-- <el-input
                        v-model="diskFillForm.percent"
                        placeholder="取值是 0 到 100 的整数"
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="diskFillForm.percent"
                        clearable
                      />
                    </el-form-item>
                    <!-- <el-form-item label="需要填充的文件大小(M)" prop="size">
                      <el-input
                        v-model="diskFillForm.size"
                        placeholder="取值是整数"
                        clearable
                      />
                    </el-form-item> -->
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="diskFillForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="performData('diskFillFormRef', diskFillForm, 3)"
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="内存填充故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="150px"
                    ref="memoryFillFormRef"
                    :model="memoryFillForm"
                    :rules="memoryFillRules"
                  >
                    <!-- <el-form-item label="内存占用模式" prop="mode">
                      <el-select
                        v-model="memoryFillForm.mode"
                        placeholder="请选择"
                        clearable
                      >
                        <el-option label="ram" value="ram" />
                        <el-option label="cache" value="cache" />
                      </el-select>
                    </el-form-item> -->
                    <el-form-item label="内存使用率(%)" prop="memPercent">
                      <!-- <el-input
                        v-model="memoryFillForm.memPercent"
                        placeholder="取值是 0 到 100 的整数"
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="memoryFillForm.memPercent"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="内存占用速率(MB/s)" prop="rate">
                      <el-input v-model="memoryFillForm.rate" clearable />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="memoryFillForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData('memoryFillFormRef', memoryFillForm, 4)
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col class="card-box">
        <el-card>
          <template #header><span>主机监控信息</span></template>
          <hostView :tableOperate="false" :ip="selectIP"></hostView>
        </el-card>
      </el-col>
      <el-col class="card-box">
        <el-card>
          <template #header><span>故障执行列表</span></template>
          <div class="execute-list">
            <ul class="infinite-list" style="overflow: auto">
              <li
                v-for="(item, index) in executeList"
                :key="index"
                v-show="item.status !== 0"
                class="infinite-list-item"
              >
                <span>{{ index + 1 }}</span>
                <span>IP：{{ item.ip }}</span>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="item.info"
                  placement="top-start"
                  ><span>{{ item.choasType }}</span>
                </el-tooltip>
                <span>{{ item.starttime }}</span>
                <el-button
                  :disabled="item.status === 2"
                  type="primary"
                  @click="stopData(item)"
                  >停止</el-button
                >
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  onlineHost,
  getDiskList,
  hostCpuExec,
  hostDiskIOExec,
  hostDiskFillExec,
  hostMemoryFillExec,
  hostStop,
  hostFaultInjectResult,
} from "@/api/injection";
import hostView from "../../monitor/host/index.vue";
import { ElLoading } from "element-plus";
import { reactive, watch } from "vue";

const { proxy } = getCurrentInstance();
const ip_list = ref([]); //主机地址list
const disk_list = ref([]);
let selectIP = ref("");
let hostRules = reactive({
  ip: [{ required: true, message: "主机地址不能为空", trigger: "blur" }],
});
let cpuForm = reactive({
  cpuPercent: "",
  timeout: "",
  cpuCount: "",
  cpuList: "",
});
let cpuRules = reactive({
  cpuPercent: [
    { required: true, message: "CPU负载百分比不能为空", trigger: "blur" },
  ],
});
let diskIOForm = reactive({
  path: "",
  readAndWrite: "",
  size: "",
  timeout: "",
});
let diskIORules = reactive({
   readAndWrite: [{ required: true, message: "磁盘读写IO负载不能为空", trigger: "blur" }],
});
let diskFillForm = reactive({
  path: "",
  percent: "",
  size: "",
  timeout: "",
});
let diskFillRules = reactive({
  percent: [{ required: true, message: "磁盘使用率不能为空", trigger: "blur" }],
});
let memoryFillForm = reactive({
  // mode: "",
  memPercent: "",
  rate: "",
  timeout: "",
});
let memoryFillRules = reactive({
  // mode: [{ required: true, message: "内存占用模式不能为空", trigger: "blur" }],
  memPercent: [
    { required: true, message: "内存使用率不能为空", trigger: "blur" },
  ],
});
let executeList = ref([]);

//获取主机地址数据
function getOnlineHost() {
  onlineHost().then((response) => {
    ip_list.value = response.data;
  });
}

//获取磁盘目录
function getdiskList() {
  getDiskList({ ip: selectIP.value }).then((response) => {
    disk_list.value = response.data.paths;
  });
}

//获取执行列表
watch(selectIP, (newVal, oldValue) => {
  getExecuteList();
  getdiskList();
});
function getExecuteList() {
  hostFaultInjectResult({ ip: selectIP.value }).then((response) => {
    executeList.value = response.data;
  });
}

//执行
function performData(formName, form, code) {
  if (selectIP.value) {
    const loading = ElLoading.service({
      lock: true,
      text: "正在执行，请稍后...",
      background: "rgba(0, 0, 0, 0.7)",
    });
    proxy.$refs[formName].validate((valid) => {
      if (valid) {
        form.ip = selectIP.value;
        if (form.timeout === 0) {
          form.timeout = "";
        }
        switch (code) {
          //CPU负载故障注入
          case 1:
            hostCpuExec(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("cpuFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //磁盘读写IO故障注入
          case 2:
            hostDiskIOExec(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("diskIOFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //磁盘填充故障注入
          case 3:
            hostDiskFillExec(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("diskFillFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //内存填充故障注入
          case 4:
            hostMemoryFillExec(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("memoryFillFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
        }
      } else {
        loading.close();
        return false;
      }
    });
  } else {
    proxy.$modal.msgError("主机地址不能为空");
  }
}

//停止
function stopData(form) {
  const loading = ElLoading.service({
    lock: true,
    text: "正在执行，请稍后...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  const params = {
    uuid: form.uuid,
    ip: form.ip,
    result: form.result,
  };
  hostStop(params).then((response) => {
    if (response.data.executeResult.success === true) {
      loading.close();
      proxy.$modal.msgSuccess("已停止执行");
      getExecuteList();
    } else {
      loading.close();
      proxy.$message({
        type: "error",
        message: response.data.executeResult.info,
      });
    }
  });
}

getOnlineHost();
getExecuteList();
</script>

<style scoped>
.hostres_wrap .card-item {
  border-right: none !important;
}
.network_form {
  display: flex;
  flex-flow: wrap;
}
.network_form .el-form-item__content .el-select,
.network_form .el-form-item__content .el-input {
  width: 80%;
}
.network_form .el-form-item__content .el-select .el-input {
  width: 100%;
}
.card-item {
  /* width: 50%; */
}
.network_form_fault .el-form-item__label {
  font-weight: normal;
}
.hostres_block {
  border: 1px solid #f2f2f2;
  margin-top: 20px;
}
.hostres_item {
  border-bottom: 1px solid #f2f2f2;
  display: flex;
}
.hostres_item:last-child {
  border-bottom: none;
}
.hostres_item .hostres_name {
  font-size: 16px;
  font-weight: bold;
  line-height: 36px;
  margin: 0;
}
.hostres_item .el-form-item__label {
  width: 190px;
  text-align: right;
  font-weight: normal;
}
.hostres_item_left {
  width: 60%;
  border-right: 1px solid #f2f2f2;
  box-sizing: border-box;
  padding-left: 10px;
  position: relative;
}
.hostres_item_btn {
  width: 40%;
  display: flex;
  padding-top: 34px;
  justify-content: center;
  align-items: center;
}
.hostres_item_btn button {
  width: 90px;
  height: 34px;
  line-height: 34px;
}
.hostres_item_btn button:first-child {
  margin-right: 10px;
}
.fault_prompt {
  position: absolute;
  bottom: 0;
  left: 200px;
  font-size: 12px;
  color: #f56c6c;
}

.zanwu {
  font-size: 13px;
  color: #333;
  line-height: 22px;
  margin: 0;
  padding-bottom: 100px;
}
.perform_list {
  padding: 0 0 100px;
  margin: 0;
}
.perform_list li {
  list-style: none;
  font-size: 13px;
  color: #333;
  line-height: 22px;
}
.card_percentage {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.percentage_item {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
  font-weight: bold;
  margin: 0;
}
.percentage_item span {
  display: block;
  font-size: 14px;
  line-height: 50px;
  color: #333;
}
.percentage_item_red {
  color: #d81b60;
  border: 12px solid #d81b60;
}
.percentage_item_yellow {
  color: #f4c512;
  border: 12px solid #f4c512;
}
.percentage_item_green {
  color: #55d327;
  border: 12px solid #55d327;
}
.card_total {
  width: 20%;
  font-size: 15px;
  line-height: 30px;
  padding-top: 50px;
  padding-left: 35px;
  font-weight: bold;
}
.card_total span {
  color: #d81b60;
}
.execute-list {
  width: 100%;
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.info {
  font-size: 12px;
  color: #909399;
  padding-left: 5%;
  display: flex;
  align-items: center;
}

.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 32px;
  margin-top: 10px;
  width: 45%;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 40%;
}
</style>
